<template>
  <div class="home">
    <van-row style="width: 100%; height: 500px;">
      <van-button type="primary" @click="startAnwer">开始答题</van-button>
    </van-row>
    <van-row>
      <div style="width: 100%; height: 800px;">
        <van-cell-group inset>
          <van-cell title="活动说明" />
          <!--奖品列表-->
            <van-list>
              <van-cell title="活动奖品" ></van-cell>
                <van-card v-for="item in taskInfo.awards"
                  :desc="item.awardName"
                  :title="item.awardsLevel"
                  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
                  :num="item.awardNums"
                  
                />
               
            </van-list>
            <!--活动相关信息-->
            <van-list>
              <van-cell title="活动时间" :label="`${taskInfo.startTime}-${taskInfo.endTime}`" />
              <van-cell title="主办单位" :label="taskInfo.organizer" />
              <van-cell title="活动规则" :label="`达到${50}分可有抽奖机会`" />
              <van-cell title="活动说明" :label="taskInfo.memo" />
              <van-cell title="我的联系方式" is-link @click="myContactInfo" />
            </van-list>
        </van-cell-group>
        
      </div>
    </van-row>
    
    
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import { useRoute, useRouter } from 'vue-router';
import { getInfo,getJssdkConfig } from '../api/base.js';
import { getTask } from '../api/task';
import { ref } from 'vue';

const route = useRoute()
const router = useRouter()
const taskId = route.query.id;
console.log(taskId, 'taskId');


const taskInfo = ref({
  "startTime": "",
  "endTime": "",
  "awards":[],
  "organizer": "",
  "memo": ""
});

console.log(999);

if (taskId) {
  getTaskDetail()
}

function getTaskDetail() {
  getTask(taskId).then((res:any) => {
    console.log(res, 'res');
    if (res.code == 200) {
      taskInfo.value = res.data;
    }
  });
}

function startAnwer() {
  router.replace(`/answer/${taskId}`)
}

function myContactInfo() {
  router.push('/contact-info')
}

</script>
<style lang="less">
.home {
  width: 100%;
  height: auto;
  min-height: 750px;
  background: url(../assets/images/mainbg.jpg) no-repeat;
  overflow-y: auto;
  .van-row .van-button {
    margin: 10rem auto;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 25px;
    background: #2b3fc5;
    color: #fff;
  }
}
</style>
